<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button size="small" style="float: right;" type="primary" @click="addPermiss">添加</el-button>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :span-method="objectSpanMethod"
            highlight-current-row
            height="680px"
            :header-cell-style="{ background: '#f5f5f5' }"
          >
            <el-table-column align="center" prop="taskName" label="重点工作"></el-table-column>
            <el-table-column align="center" prop="occurrenceTime" label="发生时间"></el-table-column>
            <el-table-column align="center" prop="departmentName" label="责任单位"></el-table-column>
            <el-table-column align="center" prop="content" label="督导核验内容"></el-table-column>
            <el-table-column align="center" prop="result" label="核验结果"></el-table-column>
            <!-- <el-table-column align="center" label="事件">
              <template slot-scope="scope">
                <el-button
                  @click="revealData(scope.row)"
                  type="text"
                  size="small"
                  >图文</el-button
                >
              </template>
            </el-table-column>-->
            <el-table-column align="center" prop="file" label="附件">
              <template slot-scope="scope">
                <el-button @click="showfilesData(scope.row)" type="text" size="small">查看附件</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="editPermiss(scope.row)" type="text">修改</el-button>
                <el-button @click="removePermiss(scope.row)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- <el-pagination
        background
        style="float:right"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>-->
    </el-card>
    <!-- 附件列表弹框 -->
    <el-dialog
      width="60%"
      title="附件列表"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-table
        :data="fileTableData"
        border
        style="width: 100%;height:600px;"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column prop="file" label="附件名称">
          <template slot-scope="scope">
            <a :href="returnFile(scope.row.file)">{{ scope.row.file }}</a>
          </template>
        </el-table-column>
        <el-table-column label="上传时间">
          <template slot-scope="scope">{{ scope.row.fileAddTime }}</template>
        </el-table-column>

        <el-table-column label="上传人" prop="userName"></el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteFile(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>-->
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>-->
    </el-dialog>

    <!-- 内容显示 -->
    <el-dialog title="文本内容" :visible.sync="dialogShow" width="70%">
      <div v-html="bookText" class="texts"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      fileTableData: [],
      tableData: [],
      pageSize: 20,
      pageNum: 1,
      total: 0,
      pos: "",
      spanData: [],
      // 弹框显示隐藏
      dialogFormVisible: false,
      // 选择附件
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      tasksList: [],
      taskProp: {
        label: "name",
        value: "id",
        children: "children",
      },
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments",
      },
      bookText: "",
      dialogShow: false,
    };
  },
  mounted() {
    this.getListByPage();
  },
  methods: {
    revealData(val) {
      this.bookText = val.event;
      this.dialogShow = true;

      //console.log(val)
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getListByPage();
    },
    check_num: function () {
      this.dutyFrom.nsScore = this.dutyFrom.nsScore.replace(/[^\d]/g, "");
    },
    returnFile(val) {
      return `${configJson.API_URL}/fileController/${val}`;
    },
    // 搜索
    fileLists(arr) {
      let str = arr.split("/");
      return str.pop();
    },
    // 添加
    addPermiss() {
      this.$router.push({
        path: "/newslism",
      });
    },
    // 查看附件
    showfilesData(row) {
      this.fileTableData = row.filess;
      this.dialogFormVisible = true;
      console.log(row);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanData[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanData[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // if (columnIndex === 5) {
      //   const _row = this.spanData[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col
      //   };
      // }
      if (columnIndex === 6) {
        const _row = this.spanData[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 7) {
        const _row = this.spanData[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    // 获取数据列表
    getListByPage() {
      this.$axios
        .post(`/supervision/getListByPage/${this.pageNum}/${this.pageSize}`)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.tableData.forEach((item, index) => {
              item.index = index + 1;
            });
            this.total = res.data.total;
            this.getSpanData(this.tableData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSpanData(data) {
      // 存放计算好的合并单元格的规则
      this.spanData = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanData.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanData[this.pos] += 1;
            this.spanData.push(0);
          } else {
            this.spanData.push(1);
            this.pos = i;
          }
        }
      }
    },

    // 部门类型
    getdepartmentTypeList() {
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then((res) => {
          if (res.code == 200) {
            this.departmentTypeList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deptTypeChange(val) {
      this.getdepartmentList(val);
    },
    // 部门列表
    getdepartmentList(val) {
      this.$axios
        .post("dept/getAllDepartmentTypeId", { id: val }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.departmentList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑
    editPermiss(row) {
      this.$router.push({
        path: "/newslism",
        query: {
          id: row.id,
        },
      });
    },
    // 删除
    removePermiss(row) {
      console.log(row);
      this.$confirm("确认删除？")
        .then((_) => {
          this.$axios
            .post("/supervision/delete", { id: row.id }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.getListByPage();
                this.$message({
                  message: "数据更新成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {});
    },
    // 上传
    submitForm() {},
  },
};
</script>

<style scoped>
.userIntSize {
  width: 80% !important;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
.selectList {
  display: flex;
}
.boxCount {
  width: 84%;
}
.texts {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  overflow-y: auto;
}
</style>
